<template>
    <div class="banner">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <!-- <swiper-slide>
          <router-link to="/activity_five">
            <img src="./img/banner/banner_1.jpg" height="786" width="1125" alt="">
          </router-link>
           <div class="banner_title">
            <p>让世界汇聚在此</p>
            <p>UKD</p>
            <div class="open"><a href=""><img src="./img/banner/open.png" alt="开立真实账户"></a></div>
          </div>
        </swiper-slide> -->
        <swiper-slide>
          <img src="./img/banner/banner1.jpg" height="786" width="1125" alt="">
          <div class="banner_title">
            <p>让世界汇聚在此</p>
            <p>UKD</p>
            <div class="open"><a href=""><img src="./img/banner/open.png" alt="开立真实账户"></a></div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <img src="./img/banner/banner2.jpg" alt="">
          <div class="banner_title">
            <p>让世界汇聚在此</p>
            <p>UKD</p>
            <div class="open"><a href=""><img src="./img/banner/open.png" alt="开立真实账户"></a></div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <img src="./img/banner/banner3.jpg" alt="">
          <div class="banner_title">
            <p>让世界汇聚在此</p>
            <p>UKD</p>
            <div class="open"><a href=""><img src="./img/banner/open.png" alt="开立真实账户"></a></div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <img src="./img/banner/banner4.jpg" alt="">
          <div class="banner_title">
            <p>让世界汇聚在此</p>
            <p>UKD</p>
            <div class="open"><a href=""><img src="./img/banner/open.png" alt="开立真实账户"></a></div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
</template>


<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          loop: true,
          noSwiping : true,
          autoplay: 3000,
          speed: 5000,
          effect: 'fade',
          paginationType:"bullets", // 分页器是圆点
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          mousewheelControl : false,
        }
      }
    },components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
.banner {
  width: 100%;
  height: 262px;
  position: relative;
  /*top: -1.933333rem;*/
  box-sizing: border-box;
}
.banner img {
  width: 100%;
  height: 100%;
}
.banner .banner_title {
  width: 100%;
  /*height: 100%;*/
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
}
.banner .banner_title p {
  text-align: center;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.8em;
  line-height: 40px;
}
.banner .banner_title p:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.5em;
}
.banner .banner_title .open {
  width: 114px;
  height: 25px;
  margin: 0 auto;
}
.banner .banner_title .open a {
  display: block;
}
.banner .banner_title .open a img {
  width: 100%;
  height: 100%;
}
</style>
